<template>
  <div>
    <el-dialog
      :title="addTitle"
      :visible="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="栏目名称"
          prop="name"
        >
          <el-col :span="11">
            <el-input
              @input="handleInput"
              v-model="ruleForm.name"
              placeholder="请输入栏目名称"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item
          label="栏目标识"
          prop="type"
        >
          <el-col :span="11">
            <el-input
              v-model="ruleForm.type"
              placeholder="请输入栏目标识"
            ></el-input>
          </el-col>
          <el-col
            :span="5"
            style="margin-left: 20px;"
          >
            尽量不要修改栏目标识
          </el-col>
        </el-form-item>
        <el-form-item
          label="上传图片"
          prop="cover"
        >
          <div
            class="upLoadPicBox"
            @click="modalPicTap('1')"
          >
            <div
              v-if="ruleForm.cover"
              class="pictrue"
            >
              <img :src="ruleForm.cover" />
            </div>
            <div
              v-else
              class="upLoad"
            >
              <i class="el-icon-camera cameraIconfont" />
            </div>
          </div>
        </el-form-item>
        <el-form-item
          label="icon图片"
          prop="icon"
        >
          <div
            class="upLoadPicBox"
            @click="modalPicIcon('1')"
          >
            <div
              v-if="ruleForm.icon"
              class="pictrue"
            >
              <img :src="ruleForm.icon" />
            </div>
            <div
              v-else
              class="upLoad"
            >
              <i class="el-icon-camera cameraIconfont" />
            </div>
          </div>
        </el-form-item>
        <el-form-item
          label="状态"
          prop="status"
        >
          <el-switch
            v-model="ruleForm.status"
            :active-value="1"
            :inactive-value="0"
            active-text="显示"
            inactive-text="不显示"
          />
        </el-form-item>

        <el-form-item
          label="排序"
          prop="sort"
        >
          <el-col :span="11">
            <el-input-number
              v-model="ruleForm.sort"
              :min="1"
              :max="1000"
              placeholder="请输入排序序号"
            ></el-input-number>
          </el-col>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="cancellation">取 消</el-button>
        <el-button
          type="primary"
          @click="determinate(addTitle)"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { pinyin } from 'pinyin-pro';
import { columnCreate, columnUpdate, columnDetail } from '@/api/column'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    addTitle: {
      type: String,
      default: ''
    },
    upDataId: {
      type: Object,
      default: ''
    }

  },
  data() {
    return {
      ruleForm: {
        name: '',
        status: false,
        type: '',
        cover: '',
        status: 0,
        icon: '',
        sort: 0
      },
      rules: {
        name: [
          { required: true, message: '请输入栏目名称，且必须是汉字', trigger: 'blur' },
          {
            validator: function (rule, value, callback) {
              if (/^[\u4e00-\u9fa5]+$/.test(value) == false) {
                callback(new Error('请输入中文'));
              } else {
                callback();
              }
            }, trigger: 'blur'
          }
        ],
      },
      dialogImageUrl: '',
      dialogVisibleImg: false,
      disabled: false
    };
  },
  watch: {
    upDataId(val, num) {
      columnDetail(val.id).then(res => {
        this.ruleForm = {
          name: res.data.name,
          status: res.data.status,
          type: res.data.type,
          cover: res.data.cover,
          status: res.data.status,
          icon: res.data.icon,
          sort: res.data.sort,
          id: res.data.id
        }
      })
    }
  },
  mounted() {

  },
  methods: {
    // 上传图片
    modalPicTap(tit) {
      const _this = this;
      this.$modalUpload(function (img) {
        _this.ruleForm.cover = img[0];
      }, tit);
    },
    modalPicIcon(tit) {
      const _this = this;
      this.$modalUpload(function (img) {
        _this.ruleForm.icon = img[0];
      }, tit);
    },

    // 汉字转换为拼音
    handleInput(value) {
      // 在这里可以执行其他操作，例如调用API、更新其他数据等。
      const py = pinyin(value, {
        pattern: 'first',
        toneType: 'none',
      }).replaceAll(' ', ''); // zg
      this.ruleForm.type = py;

    },
    // 上边 X
    handleClose(done) {
      this.dialogVisibleClick()
    },
    // 取消
    cancellation() {
      this.dialogVisibleClick()
    },
    // 确认
    determinate(title) {
      console.log(title);
      if (title == '添加栏目管理') {
        console.log(this.ruleForm, '添加栏目管理');
        columnCreate(this.ruleForm).then(async (res) => {
          if (res.status == 200) {

            this.$message.success(res.message);
            this.dialogVisibleClick()
          }
        }).catch(res => {
          this.$message.error(res.message)
        })
      } else if (title == '编辑栏目管理') {
        columnUpdate(this.ruleForm).then(async (res) => {
          if (res.status == 200) {
            this.$message.success(res.message);
            this.dialogVisibleClick()
          }
        }).catch(res => {
          this.$message.error(res.message)
        })
      }
    },
    // 关闭弹框
    dialogVisibleClick() {
      this.ruleForm = {
        name: '',
        status: false,
        type: '',
        cover: '',
        status: 0,
        icon: '',
        sort: 0
      }
      console.log(this.ruleForm, 'ruleForm');
      this.$emit('dialogVisibleClick', false);
    },
  }
}
</script>

<style lang="scss" scoped>
</style>